<template>
  <!-- 标题 -->
  <h4 class="text-center">账号管理</h4>
  <!-- 用户列表 -->
  <!-- <table border style="width: 100%"> -->
    <!-- <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>等级</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td>
          
        </td>
      </tr>
    </tbody>
  </table> -->
  <div style="display: flex;  height: 100vh;">
    <div class="users-box">
  <div class="touxiang" style="display: flex;align-items: center;">
    <span >头像：</span>
    <el-avatar shape="square" :size="100" :fit="fit" :src="url" />
    </div>
	<div class="name">
		昵称：<span>花旦小生</span>
	</div>
	<div class="idnum">
		ID：<span>20230402002</span>
	</div>
	<div class="sex">
		性别：<input type="radio" name="sex" checked="checked" id="man"/>
		<label for="man">男</label>
		<input type="radio" name="sex" id="woman"/>
		<label for="woman">女</label>
	</div>
	<div class="number">
		手机号：<span>13100740171</span>
	</div>
	<div class="identity">
		实名认证：<span>*****</span>
	</div>
</div>
  </div>

</template>

<script setup>
import { reactive, toRefs } from 'vue'
const state = reactive({
  fit:'cover',
  url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
})
const { fit, url } = toRefs(state)
</script>
<style lang="less" scoped>
	.users-box{
		font-size: 20px;
		line-height: 50px;
    // align-items: center;
    // justify-content: center;
	}
  

</style>